<div id="user-toolbar">
        <div class="wu-toolbar-button">
            <a href="#" class="easyui-linkbutton" iconCls="icon-add" onclick="openUserAdd()" plain="true">添加</a>
            <a href="#" class="easyui-linkbutton" iconCls="icon-edit" onclick="openUserEdit()" plain="true">修改</a>
            <a href="#" class="easyui-linkbutton" iconCls="icon-remove" onclick="removeUser()" plain="true">删除</a>
            <a href="#" class="easyui-linkbutton" iconCls="icon-reload" onclick="reloadUser()" plain="true">刷新</a>
        </div>
        <div class="wu-toolbar-search">
            <label>起始时间：</label><input class="easyui-datebox" style="width:100px">
            <label>结束时间：</label><input class="easyui-datebox" style="width:100px">
            <label>用户组：</label> 
            <select class="easyui-combobox" panelHeight="auto" style="width:100px">
                <option value="0">选择用户组</option>
                <option value="1">黄钻</option>
                <option value="2">红钻</option>
                <option value="3">蓝钻</option>
            </select>
            <label>关键词：</label><input class="wu-text" style="width:100px">
            <a href="#" class="easyui-linkbutton" iconCls="icon-search">开始检索</a>
        </div>
</div>
<table id="user-datagrid"></table>
<div id="user-dialog" class="easyui-dialog" data-options="closed:true,iconCls:'icon-save'" style="width:400px; padding:10px;">
	<form id="user-form" method="post">
        <table>
            <tr>
                <td width="60" align="right">姓 名:</td>
                <td><input type="text" name="name" class="wu-text wu-text0" /></td>
            </tr>
            <tr>
                <td align="right">邮 箱:</td>
                <td><input type="text" name="mail" class="wu-text wu-text1" /></td>
            </tr>
            <tr>
                <td align="right">密 码:</td>
                <td><input type="text" name="password" class="wu-text wu-text2" /></td>
            </tr>
            <tr>
                <td valign="top" align="right">内 容:</td>
                <td><textarea name="content" rows="6" class="wu-textarea" style="width:260px"></textarea></td>
            </tr>
        </table>
   </form>
</div>
<script>
	$("#user-datagrid").datagrid({
		url:"http://localhost:3000/users/list",
		fit:true,
		method:"post",	
		rownumbers:true,
		singleSelect:false,
		pageSize:2,
		pageList:[2,4,6,8,10],          
		pagination:true,
		multiSort:true,
		fitColumns:true,
		toolbar:"#user-toolbar",
		columns:[[
			{ field:'name',title:'姓名',width:100,sortable:true},
			{ field:'password',title:'密码',width:100,sortable:true},
			{ field:'mail',title:'邮箱',width:100,sortable:true},
			{field:'Games',title:'所属分类',width:50,
			        formatter: function(value,row,index){
						return '<a href="javascript:void(0)" style="display:inline-block;cursor: pointer;outline: none;text-align: center; ertical-align: middle;line-height: normal;border: 1px solid #bbb;color: #444;background: #fafafa;background: linear-gradient(to bottom,#ffffff 0,#eeeeee 100%);padding:3px 10px;border-radius: 5px 5px 5px 5px" onclick="editUser(\''+ row._id+'\')">修改</a> '+
						'<a href="javascript:void(0)" style="display:inline-block;cursor: pointer;outline: none;text-align: center; ertical-align: middle;line-height: normal;border: 1px solid #bbb;color: #444;background: #fafafa;background: linear-gradient(to bottom,#ffffff 0,#eeeeee 100%);padding:3px 10px;border-radius: 5px 5px 5px 5px" onclick="removeUser(\''+ row._id+'\')">删除</a>'
		
						}}	
		]]
	})
function openUserAdd(){
		$("#user-form").form("clear");
		$('#user-dialog').dialog({
			closed: false,
			modal:true,
            title: "添加信息",
            buttons: [{
                text: '确定',
                iconCls: 'icon-ok',
                handler: userAddAction
            }, {
                text: '取消',
                iconCls: 'icon-cancel',
                handler: function () {
                    $('#user-dialog').dialog('close');                    
                }
            }]
        });
}
//添加	
function userAddAction(){
	$('#user-form').form('submit',{
        onSubmit:function(){
        	console.log($("#user-form").serialize)
            if($(this).form('enableValidation').form('validate')){
            	$.ajax({
            		type:"post",
            		url:"http://localhost:3000/users/data",
            		data:$("#user-form").serializeJSON()
            	}).then(function(res){
            		console.log(res)
            	})
            }else{
            	alert("no")
            }
        }
    });
    $('#user-dialog').dialog("close");
    $('#user-datagrid').datagrid("reload")
//	console.log("form post")
//	console.log($("#user-form").serializeArray())
}
function reloadUser(){
	$('#user-datagrid').datagrid("reload")
}
//删除
function removeUser(){
	var node = $('#user-datagrid').datagrid('getSelected');
	var id=node._id;
	$.ajax({
		type:"delete",
		url:"http://localhost:3000/users/data/"+id
	}).then(function(res){
		$('#user-datagrid').datagrid("reload")
	})
}



$("#user-datagrid").datagrid({
		url:"http://localhost:3000/users/list",
		fit:true,
		method:"post",	
		rownumbers:true,
		singleSelect:false,
		pageSize:2,
		pageList:[2,4,6,8,10],          
		pagination:true,
		multiSort:true,
		fitColumns:true,
		toolbar:"#user-toolbar",
		columns:[[
			{ field:'name',title:'姓名',width:100,sortable:true},
			{ field:'password',title:'密码',width:100,sortable:true},
			{ field:'mail',title:'邮箱',width:100,sortable:true},
			{field:'Games',title:'所属分类',width:50,
			        formatter: function(value,row,index){
						return '<a href="javascript:void(0)" style="display:inline-block;padding:3px 10px;cursor: pointer;outline: none;text-align: center; ertical-align: middle;line-height: normal;border: 1px solid #bbb;color: #444;background: #fafafa;background: linear-gradient(to bottom,#ffffff 0,#eeeeee 100%);border-radius: 5px 5px 5px 5px" onclick="editUser(\''+ row._id+'\')">修改</a> '+
						'<a href="javascript:void(0)" style="display:inline-block;padding:3px 10px;cursor: pointer;outline: none;text-align: center; ertical-align: middle;line-height: normal;border: 1px solid #bbb;color: #444;background: #fafafa;background: linear-gradient(to bottom,#ffffff 0,#eeeeee 100%);border-radius: 5px 5px 5px 5px" onclick="removeUser(\''+ row._id+'\')">删除</a>'
		
						}}	
		]]
	})
//修改
function openUserEdit(){
	$("#user-form").form("clear");
		$('#user-dialog').dialog({			
			closed: false,
			modal:true,
            title: "修改信息",
            buttons: [{
                text: '确定',
                iconCls: 'icon-ok',
                handler: userEditAction
            }, {
                text: '取消',
                iconCls: 'icon-cancel',
                handler: function () {
                    $('#user-dialog').dialog('close');                    
                }
            }]
        });
        var node = $('#user-datagrid').datagrid('getSelected');
			console.log(node)
		var id=node._id;
        $.ajax({
			type:"post",   
			url:"http://localhost:3000/users/data/"+id
		}).then(function(res){
			$(".wu-text0").val(node.name);
			$(".wu-text1").val(node.mail);
			$(".wu-text2").val(node.password);			
		})
}
function userEditAction(id){
	var node = $('#user-datagrid').datagrid('getSelected');
	var id=node._id;
	var postUrl;
	if($(".wu-text").val()){
		$(".wu-text0").val(node.name);
		$(".wu-text1").val(node.mail);
		$(".wu-text2").val(node.password);
	}else{
		$(".wu-text0").val();
		$(".wu-text1").val();
		$(".wu-text2").val();
	}
	var formData = $('#user-form').serializeJSON();
	console.log(formData)
	$.ajax({
		type:"post",
		url:"http://localhost:3000/users/data/"+id,
		data: formData
	}).then(function(res){
		$('#user-dialog').dialog("close");
		$('#user-datagrid').datagrid("reload")
	})
}

//修改
function editUser(cateId){
	console.log(cateId)
	queryParams ={cateId:cateId}
	console.log(queryParams)

	$('#user-dialog').dialog({			
			closed: false,
			modal:true,
            title: "修改信息",
            buttons: [{
                text: '确定',
                iconCls: 'icon-ok',
                handler: userEditAction
            }, {
                text: '取消',
                iconCls: 'icon-cancel',
                handler: function () {
                    $('#user-dialog').dialog('close');                    
                }
            }]
        });
 
//      $.ajax({
//			type:"post",   
//			url:"http://localhost:3000/users/data/"+id
//			
//		})		
}
//
//function deleUser(id){
//	$.ajax({
//		type:"delete",
//		url:"http://localhost:3000/users/data/"+ id
//	}).then(function(res){		
//		$('#user-datagrid').datagrid('reload');
//	});
//}
</script>